<template>
    <div class="content_page">
        <div class="content_page_item">
            <div :class="['title', globalFont]">智能场景</div>
            <div class="scene_tab">
                <div :class="[
                    'scene_tab_item',
                    globalFont,
                    { 'active': circleInfo.activeScene == i.name }
                ]" v-for="(i, k) in circleInfo.sceneTab" :key="k" @click="chooseScene(i)">
                    {{ i.name }}
                    <div class="activeimg" v-if="circleInfo.activeScene == i.name">
                        <image src="/static/home/icon_Selected.png"></image>
                    </div>
                </div>
            </div>
        </div>
        <div class="content_page_item" style="display: flex; justify-content: space-between; align-items: center;">
            <div :class="['title', globalFont]">{{ circleInfo.activeScene == '风力' ? '风力级别' : circleInfo.activeScene ==
                '温度' ? '温度超过' : '湿度超过' }}</div>
            <div :class="['choose_modal', globalFont]" @click="chooseModal(circleInfo.activeScene)">
                <span v-if="!selectedValue[type]">
                    {{ circleInfo.activeScene == '风力' ? '请选择风力级别' : circleInfo.activeScene == '温度' ? '请选择温度' : '请选择湿度'
                    }}
                    <image src="/static/home/toPage.png"></image>
                </span>
                <span v-else>
                    {{ selectedValue[type] }}
                    <image src="/static/home/toPage.png"></image>
                </span>
            </div>
        </div>
        <div class="content_page_item">
            <div :class="['title', globalFont]">计划禁用</div>
            <div class="scene_tab" style="justify-content: flex-start;">
                <div :class="[
                    'scene_tab_item_two',
                    globalFont,
                    { 'active': i.isSelected }
                ]" v-for="(i, k) in circleInfo.planTab" :key="k" @click="choosePlan(i)">
                    {{ i.name }}
                    <div class="activeimg" v-if="i.isSelected">
                        <image src="/static/home/icon_Selected.png"></image>
                    </div>
                </div>
            </div>
        </div>
        <div class="content_page_item" style="display: flex; justify-content: space-between; align-items: center;">
            <div :class="['title', globalFont]">场景状态</div>
            <up-switch v-model="submitForm.sceneStatus" activeColor="#00A57D"></up-switch>
        </div>
        <div :class="['save_btn', globalFont]" @click="toSave">保存
        </div>
        <!-- 弹框展示 -->
        <up-popup :show="ModalData.showModal" z-index="999999999" mode="bottom" :round="16">
            <view class="title addtitle">
                <div style="width: 40rpx"></div>
                <text>编辑场景</text>
                <image src="/static/home/close.png" @click="ModalData.showModal = false"></image>
            </view>
            <view class="part borderLine mt114">
                <up-picker :show="ModalData.showModal" :columns="ModalData[type]" :defaultIndex="defaultIndexes[type]"
                    @change="changePicker"></up-picker>
                <view class="modalBtn">
                    <view class="btn" @click="sureSubmit">确认</view>
                </view>
            </view>
        </up-popup>
    </div>
</template>
<script lang="ts" setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
import { sceneDeviceEdit } from "@/api/detail/detail.ts";
const submitForm = ref<any>({
    equipmentId: '',
    sceneId: 0,
    sceneType: 'WIND',
    sceneCondition: '>',
    sceneValue: "",
    disablePlan: "",
    sceneStatus: true,
});
const circleInfo = ref<any>({
    activeScene: '风力',
    sceneTab: [
        {
            name: "风力",
            value: 1,
        },
        {
            name: "温度",
            value: 2,
        },
        {
            name: "湿度",
            value: 3,
        }
    ],
    planTab: [
        {
            name: "驱蚊状态",
            value: 'REPELLING',
            isSelected: true

        },
        {
            name: "雾森计划",
            value: 'FOGGING',
            isSelected: false
        },
        {
            name: "降温计划",
            value: 'COOLING',
            isSelected: false
        }
    ],
})
const type = ref('')
const ModalData = ref<any>({
    showModal: false,
    'windColumns': [['大于', '小于'], ['1级', '2级', '3级', '4级', '5级', '6级', '7级', '8级', '9级', '10级', '11级', '12级']],
    'temperaColumns': [['大于', '小于'], ['0℃', '5℃', '10℃', '15℃', '20℃', '25℃', '30℃', '35℃', '40℃', '45℃', '50℃']],
    'humidityColumnns': [['大于', '小于'], ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']],
})
const defaultIndexes = ref<any>({
    'windColumns': [0, 0],
    'temperaColumns': [0, 0],
    'humidityColumnns': [0, 0]
});
const selectedValue = ref<any>({
    'windColumns': '',
    'temperaColumns': '',
    'humidityColumnns': ''
});
const hasIndexes = ref<any>({
    windColumns: [0, 0],
    temperaColumns: [0, 0],
    humidityColumnns: [0, 0],
});
const globalFont = ref()
const instance = getCurrentInstance();
const hasIndex = ref(0)
const appStorage = instance?.appContext.config.globalProperties.appStorage; // 获取全局变量
const chooseScene = (item: any) => {
    type.value = item.name == '风力' ? 'windColumns' : item.name == '温度' ? 'temperaColumns' : "humidityColumnns"
    circleInfo.value.activeScene = item.name
}
const choosePlan = (item: any) => {
    item.isSelected = !item.isSelected
};
const chooseModal = (i: String) => {
    type.value = i == '风力' ? 'windColumns' : i == '温度' ? 'temperaColumns' : "humidityColumnns"
    ModalData.value.showModal = true
}
const changePicker = (e: any) => {
    let columns;
    if (type.value === 'windColumns') {
        columns = e.indexs
    } else if (type.value === 'temperaColumns') {
        columns = e.indexs
    } else if (type.value === 'humidityColumnns') {
        columns = e.indexs
    }
    hasIndexes.value[type.value] = columns.slice();
}
const sureSubmit = () => {
    let index = hasIndexes.value[type.value];
    if (index === undefined || index === null) {
        index = [0, 0];
    }
    if (type.value === 'windColumns') {
        defaultIndexes.value['windColumns'] = index;
        selectedValue.value['windColumns'] = `${ModalData.value.windColumns[0][index[0]]}${ModalData.value.windColumns[1][index[1]]}`;
    } else if (type.value === 'temperaColumns') {
        defaultIndexes.value['temperaColumns'] = index;
        selectedValue.value['temperaColumns'] = `${ModalData.value.temperaColumns[0][index[0]]}${ModalData.value.temperaColumns[1][index[1]]}`;
    } else if (type.value === 'humidityColumnns') {
        defaultIndexes.value['humidityColumnns'] = index;
        selectedValue.value['humidityColumnns'] = `${ModalData.value.humidityColumnns[0][index[0]]}${ModalData.value.humidityColumnns[1][index[1]]}`;
    }
    ModalData.value.showModal = false;
}
const toSave = () => {
    submitForm.value.sceneType = circleInfo.value.activeScene == '风力' ? 'WIND' : circleInfo.value.activeScene == '温度' ? 'TEMP' : 'HUM'
    if (submitForm.value.sceneType == 'WIND') {
        if (!selectedValue.value['windColumns']) { 
            uni.showToast({
                title: '请选择风力级别',
                icon: 'none'
            })
            return
        }
        submitForm.value.sceneCondition = ModalData.value.windColumns[0][defaultIndexes.value['windColumns'][0]] == '大于' ? '>' : '<'
        submitForm.value.sceneValue = ModalData.value.windColumns[1][defaultIndexes.value['windColumns'][1]].replace('级', '')
    } else if (submitForm.value.sceneType == 'TEMP') {
        if (!selectedValue.value['temperaColumns']) { 
            uni.showToast({
                title: '请选择温度',
                icon: 'none'
            })
            return
        }
        submitForm.value.sceneCondition = ModalData.value.temperaColumns[0][defaultIndexes.value['temperaColumns'][0]] == '大于' ? '>' : '<'
        submitForm.value.sceneValue = ModalData.value.temperaColumns[1][defaultIndexes.value['temperaColumns'][1]].replace('℃', '')
    } else {
        if (!selectedValue.value['humidityColumnns']) { 
            uni.showToast({
                title: '请选择湿度',
                icon: 'none'
            })
            return
        }
        submitForm.value.sceneCondition = ModalData.value.humidityColumnns[0][defaultIndexes.value['temperaColumns'][0]] == '大于' ? '>' : '<'
        submitForm.value.sceneValue = ModalData.value.humidityColumnns[1][defaultIndexes.value['temperaColumns'][0]].replace('%', '')
    }
    submitForm.value.disablePlan = circleInfo.value.planTab.filter(plan => plan.isSelected)  // 过滤出 isSelected 为 true 的项
        .map(k => k.value)  // 提取 value
        .join(';');  // 用 ";" 分隔
    sceneDeviceEdit(submitForm.value).then((res) => {
        if (res.resultStatus) {
            uni.showToast({
                title: "操作成功",
                icon: "none",
                duration: 1500,
            });
        }
        setTimeout(() => {
            uni.reLaunch({
                url: `/pages/setDevice/settingPage?currentTab=2`,
            });
        }, 200)

    })

}
const editdata = (options: any) => {
    submitForm.value.sceneType = options.sceneType;
    submitForm.value.sceneCondition = options.sceneCondition;
    submitForm.value.sceneValue = options.sceneValue;
    submitForm.value.disablePlan = options.disablePlan;
    submitForm.value.sceneStatus = options.sceneStatus == 'true' ? true : false;
    circleInfo.value.planTab.forEach((f) => {
        if (submitForm.value.disablePlan.split(';').includes(f.value)) {
            f.isSelected = true;
        } else {
            f.isSelected = false;
        }
    });
    circleInfo.value.activeScene = submitForm.value.sceneType == 'WIND' ? '风力' : submitForm.value.sceneType == 'TEMP' ? '温度' : '湿度'
    type.value = circleInfo.value.activeScene == '风力' ? 'windColumns' : circleInfo.value.activeScene == '温度' ? 'temperaColumns' : "humidityColumnns"
    // 风力回显
    if (submitForm.value.sceneType == 'WIND') {
        const sceneConditionIndex = ModalData.value['windColumns'][0].indexOf(submitForm.value.sceneCondition === '>' ? '大于' : '小于');
        const sceneIndex = ModalData.value['windColumns'][1].indexOf(submitForm.value.sceneValue + '级');
        defaultIndexes.value['windColumns'] = [sceneConditionIndex, sceneIndex];
        selectedValue.value['windColumns'] = `${ModalData.value.windColumns[0][sceneConditionIndex]}${ModalData.value.windColumns[1][sceneIndex]}`;
    } else if (submitForm.value.sceneType == 'TEMP') {
        const sceneConditionIndex = ModalData.value['temperaColumns'][0].indexOf(submitForm.value.sceneCondition === '>' ? '大于' : '小于');
        const sceneIndex = ModalData.value['temperaColumns'][1].indexOf(submitForm.value.sceneValue + '℃');
        defaultIndexes.value['temperaColumns'] = [sceneConditionIndex, sceneIndex];
        selectedValue.value['temperaColumns'] = `${ModalData.value.temperaColumns[0][sceneConditionIndex]}${ModalData.value.temperaColumns[1][sceneIndex]}`;
    } else {
        const sceneConditionIndex = ModalData.value['humidityColumnns'][0].indexOf(submitForm.value.sceneCondition === '>' ? '大于' : '小于');
        const sceneIndex = ModalData.value['humidityColumnns'][1].indexOf(submitForm.value.sceneValue + '%');
        defaultIndexes.value['humidityColumnns'] = [sceneConditionIndex, sceneIndex];
        selectedValue.value['humidityColumnns'] = `${ModalData.value.humidityColumnns[0][sceneConditionIndex]}${ModalData.value.humidityColumnns[1][sceneIndex]}`;
    }
}
const showCool = ref()
onLoad((options: any) => {
    showCool.value = options.temperatureStatus == 'true' ? true : false
    if (!showCool.value) {
        circleInfo.value.planTab = [
            {
                name: "驱蚊状态",
                value: 'REPELLING',
                isSelected: true

            },
            {
                name: "雾森计划",
                value: 'FOGGING',
                isSelected: false
            },
        ]
    } else {
        circleInfo.value.planTab = [
            {
                name: "驱蚊状态",
                value: 'REPELLING',
                isSelected: true

            },
            {
                name: "雾森计划",
                value: 'FOGGING',
                isSelected: false
            },
            {
                name: "降温计划",
                value: 'COOLING',
                isSelected: false
            }
        ]
    }
    submitForm.value.sceneId = options.sceneId || 0;
    submitForm.value.equipmentId = options.equipmentId || 0;
    if (options.sceneId != 0) {
        editdata(options)
    }
    const userInfo = appStorage.getObj("userInfo_key");
    globalFont.value = userInfo.smallFont
});

</script>
<style lang="scss" scoped>
:root {
    /* 默认字号 */
    --font-size-small: 26rpx;
    /* 中号字号 */
    --font-size-medium: 32rpx;
    /* 大号字号 */
    --font-size-large: 40rpx;
}

.small_font {
    font-size: var(--font-size-small);
}

.small-medium {
    font-size: var(--font-size-medium);
}

.small-large {
    font-size: var(--font-size-large);
}


.content_page {
    background-color: #fff;
    padding: 0 32rpx;

    &_item {
        padding: 30rpx 0;
        border-bottom: 2rpx solid #f5f6f7;

        .scene_tab {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            &_item {
                width: 30%;
                height: 84rpx;
                background: #fff;
                border-radius: 16rpx;
                border: 2rpx solid #efefef;
                line-height: 84rpx;
                color: #333;
                text-align: center;
                position: relative;

                .activeimg {
                    image {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 38rpx;
                        height: 32rpx;
                    }
                }


            }

            &_item_two {
                width: 30%;
                height: 84rpx;
                background: #fff;
                border-radius: 16rpx;
                border: 2rpx solid #efefef;
                line-height: 84rpx;
                color: #333;
                text-align: center;
                position: relative;
                margin-right: 50rpx;

                .activeimg {
                    image {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 38rpx;
                        height: 32rpx;
                    }
                }

                &:last-child {
                    margin-right: 0;
                }


            }

            .active {
                border: 1px solid #00a67e;
            }

        }

        .choose_modal {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            image {
                width: 24rpx;
                height: 24rpx;
                margin-left: 20rpx;
            }
        }
    }

    .submit_btn {
        height: 88rpx;
        background: linear-gradient(90deg, #00a67e, #006d56);
        font-size: 36rpx;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        border-radius: 16rpx;
        margin: 70rpx auto;
    }

    .save_btn {
        width: 686rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: linear-gradient(90deg, #00a67e, #006d56);
        border-radius: 8px;
        margin: 60rpx auto;
        color: #ffffff;
    }
}
</style>
<style scoped lang="scss">
.slot-content {
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;



}
</style>
